<template>
  <el-container class="recyclebin-view">
    <el-main v-loading="loading">
      <el-table :data="table.data" @sort-change="fieldFilter" class="sa-table" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column sortable="custom" prop="id" label="ID" min-width="100"></el-table-column>
        <el-table-column label="名称" min-width="100">
          <template #default="scope">
            <div v-if="scope.row.goods" class="sa-table-line-1">
              {{ scope.row.goods.title || '-' }}
            </div>
            <div v-else>{{ scope.row.goods_id }}</div>
            <div></div>
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="delete_time"
          label="补货时间"
          min-width="172"
        ></el-table-column>
      </el-table>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../goods.service';
  import { usePagination } from '@/sheep/hooks';

  const loading = ref(true);

  // 表格状态
  const table = reactive({
    data: [],
    order: '',
    sort: '',
    selected: [],
  });

  const { pageData } = usePagination();

  // 获取数据
  async function getData() {
    loading.value = true;
    const { data } = await api.stockWarning.recyclebin({
      page: pageData.page,
      list_rows: pageData.list_rows,
      order: table.order,
      sort: table.sort,
    });
    table.data = data.data;
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
    loading.value = false;
  }

  // table 字段排序
  function fieldFilter({ prop, order }) {
    table.order = order == 'ascending' ? 'asc' : 'desc';
    table.sort = prop;
    getData();
  }

  onMounted(() => {
    getData();
  });
</script>
